<template>
	<view class="container" @click="handelisFocus">
		<!-- 动态背景容器：双层图片实现淡入淡出 -->
		<view class="bg-container" >
			<!-- 当前显示的背景图 -->
			<image class="dynamic-bg" :src="currentBgUrl" mode="widthFix" alt="动态背景图" ></image>
			<!-- :class="{ 'fade-out': isTransitioning }" -->
			<!-- 待显示的下一张背景图（初始隐藏） -->
			<image class="dynamic-bg next-bg" :src="nextBgUrl" mode="widthFix" alt="动态背景图"
				:class="{ 'fade-in': isTransitioning }"></image>
		</view>
		<!-- 内容容器 -->
		<view class="content-wrapper">
			<!-- 头部区域 -->
			<view class="header">
				<view class="header-logo">
					<image src="../../static/img/logo.png" mode="" alt="logo"></image>
				</view>
				<view class="time-box">
					<text class="time">{{ currentTime }}</text>
					<text class="date">{{ currentDate }}</text>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="avatar-box">
				<view class="avatar" @click="openModal">
					<image src="../../static/img/头像.png" mode="" alt="用户头像"></image>
				</view>

				<view class="normal-Tips" v-if="isEquipment == true">
					<view class="Tips-item">
						<view class="">
							<uv-icon name="checkbox-mark" color="#07C160"></uv-icon>
						</view>
						<view class="normal-text">
							设备正常
						</view>
					</view>
				</view>
				<view class="abnormal-Tips" v-if="isEquipment == false">
					<view class="Tips-item-abnormal">
						<view class="">
							<uv-icon name="close" color="orange"></uv-icon>
						</view>
						<view class="abnormal-text">
							设备异常，请检查设备
						</view>
					</view>
					<view class="refresh" @click="ocrRecognition">
						刷新设备
					</view>
				</view>
				<!-- 扫码枪输入框 -->
				<view style="opacity: 0;">
					<uni-easyinput type="text" placeholder="" :focus="isFocus" @blur="handleBlur"
						v-model="valueipt"></uni-easyinput>
				</view>



			</view>

			<view class="content">
				<!-- 来访预约模块 -->
				<view class="reserve" @click="handleOpenpre(0)">
					<text class="module-title">来访预约</text>
					<view class="reserve-info">
						<view class="reserve-icon">
							<image src="../../static/icon/icon-1.png" alt="预约图标"></image>
						</view>
						<view class="reserve-num-box">
							<view class="reserve-num">
								{{securityList.toDayCount}} <span class="reserve-span">条</span>
							</view>
							<view class="reserve-desc">今日已预约</view>
						</view>
					</view>
				</view>

				<!-- 访客验证模块 -->
				<view class="module verify">
					<text class="module-title">访客验证</text>
					<view class="verify-types">
						<view class="verify-item">
							<view class="">
								<image class="verify-icon" src="../../static/icon/icon-2.png" mode="widthFix"
									alt="身份证验证图标"></image>
							</view>
							<view class="verify-text">身份证验证</view>
						</view>
						<view class="verify-item">
							<view class="">
								<image class="verify-icon3" src="../../static/icon/icon-3.png" mode="widthFix"
									alt="访客码验证"></image>
							</view>
							<view class="verify-text">访客码验证</view>
						</view>
						<view class="verify-item">
							<view class="">
								<image class="verify-icon" src="../../static/icon/icon-4.png" mode="widthFix"
									alt="人工审核"></image>
							</view>
							<view class="verify-text">人工审核</view>
						</view>
					</view>
				</view>

				<!-- 右侧模块区域 -->
				<view class="right-modules">
					<view class="module stats">
						<view class="">
							<image class="stats-icon" src="../../static/icon/icon-6.png" mode="widthFix" alt="统计图标">
							</image>
						</view>
						<view class="stats-info">
							<view class="stat-item">
								<text class="stat-num">{{securityList.toWeekPeopleCount}} </text>
								<text class="stat-desc">本周访客</text>
							</view>
							<view class="stat-item">
								<text class="stat-num">{{securityList.toWeekCarCount}} </text>
								<text class="stat-desc">车辆数</text>
							</view>
						</view>
					</view>
					<view class="register" @click="handleOpenpre(1)">
						<view class="">
							<image class="register-icon" src="../../static/icon/icon-5.png" mode="widthFix" alt="登记图标">
							</image>
						</view>
						<view class="">
							<text class="register-title">访客记录</text>
						</view>
					</view>


				</view>
			</view>
		</view>



		<!-- 登录弹窗 -->
		<uv-popup ref="showLogin" class="custom-popup loging-popup" :closeOnClickOverlay="false" style="z-index: 101;"
			overlayOpacity="0.8">
			<view class="popup-content-log">
				<view class="close-item-log" @click="handleLogClose" v-if="isSwitch === 'Switch'">
					<uv-icon name="close" size="1.5vw" color="#000000"></uv-icon>
				</view>
				<LoginVue @loginSuccess="handleLogin" />
			</view>
		</uv-popup>


		<!-- 用户中心 -->
		<uv-popup ref="showUser" class="custom-popup user-popup" style="z-index: 100;">
			<view class="popup-content-user">
				<view class="close-item-user" @click="handleUserClose">
					<uv-icon name="close" size="1.5vw" color="#000000"></uv-icon>
				</view>
				<userInfoVue @Switch-user="handleChildSwitch" @Exit-user="handleChildExit" />
			</view>
		</uv-popup>

		<!-- 审核弹窗（uv-popup，添加唯一类 review-popup） -->
		<uv-popup ref="showReview" class="custom-popup review-popup" style="z-index: 101;">
			<view class="popup-content">
				<view class="close-item" @click="handleclose">
					<uv-icon name="close" size="2.4vw" color="#000000"></uv-icon>
				</view>
				<informationReviewVue :current-Id="currentId" @releaseSuccess="handleChildReleaseSuccess" />
			</view>
		</uv-popup>

		<!-- 预约记录弹窗 -->
		<uv-popup ref="showPre" class="custom-popup review-popup" style="z-index: 100;">
			<view class="popup-content">
				<view class="close-item" @click="handlePreClose">
					<uv-icon name="close" size="2.4vw" color="#000000"></uv-icon>
				</view>
				<AppointmentRecordVue :current-index="PreIndex" @detail-pre="handleChildDetail"
					ref="appointmentRecordRef" />
			</view>
		</uv-popup>

		<!-- 来防登记弹窗 -->
		<!-- <uv-popup ref="showAscend" @change="change" class="custom-popup review-popup">
			<view class="popup-content">
				<view class="close-item" @click="handleAscendClose">
					<uv-icon name="close" size="2.4vw" color="#000000"></uv-icon>
				</view>
				<ascendVue />
			</view>
		</uv-popup> -->


	</view>
</template>

<script setup>
	import {
		ref,
		nextTick,
		onMounted,
		onUnmounted,
		watch
	} from 'vue';
	import informationReviewVue from '@/components/informationReview/informationReview.vue';
	import AppointmentRecordVue from '@/components/AppointmentRecord/AppointmentRecord.vue';
	import userInfoVue from '@/components/userInfo/userInfo.vue';
	import ascendVue from '../../components/ascend/ascend.vue';
	import LoginVue from '../../components/Login/Login.vue';
	import {
		$get,
		$post,
		$put
	} from "@/utils/request.js"




	let timeTimer = null;
	let bgTimer = null;
	onMounted(() => {
		updateTime();
		timeTimer = setInterval(updateTime, 60000);
		bgTimer = fetchDynamicBg();
		const getToken = uni.getStorageSync('token');
		if (!getToken) {
			handleLogOpn()
			controlIdCard(false);
		} else {
			// getStatus()
			securityHome()
			ocrRecognition();

		}
	});

	onUnmounted(() => {
		clearInterval(timeTimer);
		clearInterval(bgTimer);

	});

	// 首页统计数据查询
	const securityList = ref({
		toDayCount: 0,
		toWeekPeopleCount: 0,
		toWeekCarCount: 0
	})

	const handelisFocus = () => {
		isFocus.value = false //启动扫描枪输入框聚焦事件
	}

	const securityHome = () => {
		$get('/system/visitorInfo/securityHome', ).then(res => {
			if (res.code === 200) {
				console.log(res, '统计查询');
				securityList.value = res.data
			} else {
				uni.showToast({
					icon: 'error',
					title: res.msg
				})
			}
		})
	}

	// 动态背景图列表
	const bgImages = [
		'../../static/img/indexBg1.png',
		'../../static/img/indexBg2.png',
		'../../static/img/indexBg3.png',
		'../../static/img/indexBg4.png'
	];
	const currentTime = ref('');
	const currentDate = ref('');

	// 背景切换相关状态
	const currentBgUrl = ref(bgImages[0]);
	const nextBgUrl = ref('');
	const isTransitioning = ref(false);
	let currentIndex = 0;

	// 背景切换逻辑（淡入淡出效果）
	const fetchDynamicBg = () => {
		const timer = setInterval(() => {
			const nextIndex = (currentIndex + 1) % bgImages.length;
			nextBgUrl.value = `${bgImages[nextIndex]}?timestamp=${Date.now()}`;
			isTransitioning.value = true;

			// 等待动画完成后更新状态
			setTimeout(() => {
				currentIndex = nextIndex;
				currentBgUrl.value = nextBgUrl.value;
				isTransitioning.value = false;
			}, 500); // 与CSS过渡时间保持一致
		}, 5000); // 每10秒切换一次

		return timer;
	};

	// 时间更新函数
	const updateTime = () => {
		const date = new Date();
		// 处理时间
		const hours = date.getHours().toString().padStart(2, '0');
		const minutes = date.getMinutes().toString().padStart(2, '0');
		currentTime.value = `${hours}:${minutes}`;

		// 处理日期
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		currentDate.value = `今天 ${weekDays[date.getDay()]} ${year}年${month}月${day}日`;
	};

	// 退出账号弹框
	const showUser = ref(null);
	const openModal = () => {
		showUser.value.open('');
	}
	const handleUserClose = () => {
		showUser.value.close('');
	}
	//退出账号后，关闭弹框 打开登录弹窗
	const handleChildExit = () => {
		uni.removeStorageSync('token')
		showUser.value.close('');
		uni.showToast({
			icon: "success",
			title: '退出成功'
		})
		handleLogOpn()
		controlIdCard(false);
		isEquipment.value = false;
		isSwitch.value = ''
	}


	// 切换账号操作
	const isSwitch = ref(null)
	const handleChildSwitch = (item) => {
		isSwitch.value = item
		handleLogOpn()
	}




	// 登录弹窗
	const showLogin = ref(null)
	const handleLogOpn = () => {
		showLogin.value.open('')
	}
	const handleLogClose = () => {
		showLogin.value.close('')
	}
	// 登录成功后事件
	const handleLogin = (item) => {
		showLogin.value.close('')
		securityHome()
		ocrRecognition()
	}



	// 来访审核弹窗
	const showReview = ref(null);
	const currentId = ref([]) //当前id和详情标识，pre预约详情，record记录详情
	const handleExamine = (id, mark) => {
		currentId.value = {
			id: id,
			mark: mark
		}
		showReview.value.open('')
	}
	const handleclose = () => {
		showReview.value.close('')
		controlIdCard(true); //启动自动读取身份证 
		isFocus.value = false //启动扫描枪输入框聚焦事件
	}
	const handleChildReleaseSuccess = () => {
		showReview.value.close('')
		isFocus.value = false //启动扫描枪输入框聚焦事件
		if (appointmentRecordRef.value) { //通知记录列表刷新
			appointmentRecordRef.value.onParentNotify('releaseSuccess'); // 可传参数
		}
	}


	// 预约记录
	const showPre = ref(null)
	const PreIndex = ref(null) //控制预约记录和访客记录active
	const appointmentRecordRef = ref(null); //通知子组件刷新列表
	const handleOpenpre = (index) => {
		PreIndex.value = index
		showPre.value.open('')
	}
	const handlePreClose = () => {
		showPre.value.close('')
		isFocus.value = false //启动扫描枪输入框聚焦事件
	}
	// 来访预约查看详情事件
	const handleChildDetail = (id, mark) => {
		handleExamine(id, mark)
	}


	//获取身份证设备是否在线
	const isEquipment = ref(false)


	// 状态管理（替代原this中的属性）
	const isconncet = ref(false); // 连接状态
	const websockets = ref(null); // WebSocket实例


	// WebSocket连接状态变化处理
	const socketChange = () => {
		const state = websockets.value?.readyState;
		console.log('state', state);

		// 连接成功（状态1）
		if (state === 1) {
			controlIdCard(true);
			isEquipment.value = true;
		}
		// 连接关闭（状态3）
		if (state === 3) {
			controlIdCard(false);
			isEquipment.value = false;
		}
	};

	// 关闭WebSocket连接
	const closeConnect = () => {
		if (websockets.value) {
			websockets.value.close();
		}
	};

	// OCR识别（初始化/断开WebSocket连接）
	const ocrRecognition = () => {
		if (!isEquipment.value) {
			// 建立新连接
			const url = "ws:127.0.0.1:9001";
			websockets.value = new WebSocket(url);

			// 监听连接状态
			websockets.value.onopen = (event) => socketChange();



			// 监听消息接收
			websockets.value.onmessage = (res) => {
				if (res.data === "failed to obtain ID card information") {
					console.log('获取身份证信息失败');
					return;
				}
				if (res.data === '连接设备失败') {
					closeConnect();
					return;
				}

				const alldata = res.data.split("|");
				console.log('alldata', alldata);

				if (alldata.length >= 17) {
					getIdCard(alldata[8])

				} else {
					console.log(res.data);
				}
			};

			// 监听连接关闭
			websockets.value.onclose = (event) => socketChange();
		} else {
			// 已连接则断开
			console.log("设备断开");
			closeConnect();
		}
	};

	// 读取身份证信息
	const readIDCard = () => {
		if (!isEquipment.value) {} else {
			const parameterAll = "timeout=" + 10000;
			const val = "03?" + parameterAll;
			websockets.value.send(val);
		}
	};



	// 自动读取身份证信息
	let isRunning = false; // 控制开关
	let idCardInterval = null; // 定时器ID
	const getIdCard = (alldata) => {
		const data = {
			visitorCardNumber: alldata
		}
		$get('/system/idCard/read', data, false).then(res => {
			if (res.code === 200) {
				controlIdCard(false); //停止自动读取身份证 
				handleChildDetail(res.data, 'pre') //通过识别身份证号查询详情
			} else if (res.code === 500) {
				if (res.msg.indexOf("设备异常") > -1) {
					isEquipment.value = false
					controlIdCard(false);
				}

				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}
		})
	}





	// 通过传入true/false控制启动/停止
	const controlIdCard = (status) => {
		if (status && !idCardInterval) {
			idCardInterval = setInterval(readIDCard, 3000);
		} else if (!status && idCardInterval) {
			clearInterval(idCardInterval);
			idCardInterval = null;
		}
	}

	const valueipt = ref('');
	const isFocus = ref(true);

	const handleBlur = () => {
		nextTick(() => {
			if (valueipt.value) {
				isFocus.value = false
				getInfoCode(valueipt.value)
			}
		});
	};

	// 扫码枪调用接口
	const getInfoCode = (id) => {
		$get('/system/visitorInfo/getInfo', {
			id: id
		}).then(res => {
			valueipt.value = ''
			if (res.code == 200 && res.data == null) {
				uni.showToast({
					icon: 'error',
					title: '暂无预约记录',
					duration: 3000
				})
			} else if (res.code == 200 && res.data !== null) {
				handleChildDetail(id, 'pre')
			}
		})
	}

	watch(
		() => isFocus.value,
		(newVal, oldVal) => {
			if (newVal) {

			} else {
				setTimeout(() => isFocus.value = true, 100);
			}
		}, {
			immediate: true,
			deep: true,
		}
	);



	// 来访登记
	// const showAscend = ref(null)
	// const hanldeAscend = () => {
	// 	showAscend.value.open('')
	// }
	// const handleAscendClose = () => {
	// 	showAscend.value.close('')
	// }
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		padding: 0;
		margin: 0;

		// 动态背景容器
		.bg-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			
			z-index: 1;
		}

		// 动态背景图样式
		.dynamic-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 1;
			transition: opacity 0.5s ease-in-out;
			opacity: 1;

			&.next-bg {
				opacity: 0;
			}

			&.fade-out {
				opacity: 0;
			}

			&.fade-in {
				opacity: 1;
			}
		}

		// 内容容器样式
		.content-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			background: url('../../static/img/indexBg.png') no-repeat center center;
			background-size: cover;
			background-attachment: fixed;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			z-index: 2;

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	width: 100%;
			// 	height: 100%;
			// 	background-color: rgba(0, 0, 0, 0.1);
			// 	z-index: -1;
			// }

			.header {
				width: 85%;
				margin-top: 2vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header-logo {
					width: 15vw;
					height: 4vw;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.time-box {
					text-align: right;

					.time {
						font-size: var(--text-65);
						color: var(--color-ff);
						display: block;
					}

					.date {
						font-size: var(--text-18);
						color: var(--color-ff);
						display: block;
					}
				}
			}

			.content {
				width: 82%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: calc(100% - 100rpx);
				position: relative;
			}

			.avatar-box {
				position: absolute;
				bottom: 3vw;
				left: 2vw;
				display: flex;
				align-items: center;
				gap: 0.52vw;

				.avatar {
					width: 1.2vw;
					height: 1.2vw;
					background-color: rgba(255, 255, 255, 0.2);
					border-radius: 20px;
					cursor: pointer;


					&:hover {
						background-color: rgba(58, 139, 218, 0.6);
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.normal-Tips {
					width: 4vw;
					height: 2vw;
					display: flex;
					align-items: center;

					.Tips-item {
						width: 100%;
						height: 80%;
						border-radius: 0.8vw;
						display: flex;
						align-items: center;
						gap: 0.2vw;
						justify-content: center;
						background-color: rgba(255, 255, 255, 0.2);


						.normal-text {
							color: #07C160;
							font-size: 0.52vw;
						}

					}

				}

				.abnormal-Tips {
					width: 12vw;
					height: 2vw;
					display: flex;
					align-items: center;
					justify-content: space-around;
					z-index: 99;

					.Tips-item-abnormal {
						width: 70%;
						height: 80%;
						border-radius: 0.8vw;
						display: flex;
						align-items: center;
						gap: 0.2vw;
						justify-content: center;
						background-color: rgba(255, 255, 255, 0.2);

						.abnormal-text {
							color: orange;
							font-size: 0.52vw;
						}
					}

					.refresh {
						width: 26%;
						height: 80%;
						border-radius: 0.8vw;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #3279CD;
						color: #fff;
						font-size: 0.52vw;
						cursor: pointer;
					}
				}

			}


			.module-title {
				font-size: var(--text-38);
				color: var(--color-ff);
				font-weight: bold;
				margin-bottom: 20rpx;
				display: block;
				padding-bottom: 10rpx;
			}

			.reserve:hover {
				transition: all 0.3s ease;
				transform: translateY(-5px);
				box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
			}

			.reserve {
				width: 20vw;
				height: 16vw;
				border-radius: 1vw;
				padding: 50rpx 80rpx;
				box-sizing: border-box;
				background-color: rgba(41, 191, 135, 0.6);
				cursor: pointer;
				transition: all 0.3s ease;
				transform: translateY(0);

				.reserve-info {
					margin-top: 3vw;
					display: flex;
					align-items: center;
					gap: 3vw;

					.reserve-icon {
						width: 5vw;
						height: 5vw;

						// width: 240rpx;
						// height: 240rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.reserve-num-box {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.reserve-num {
							font-size: var(--text-44);
							color: var(--color-ff);
							font-weight: bold;
							text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						}

						.reserve-span {
							color: var(--color-ff);
							font-size: var(--text-16);
							opacity: 0.9;
						}

						.reserve-desc {
							font-size: var(--text-20);
							color: var(--color-ff);
							opacity: 0.9;
						}
					}
				}
			}

			.verify {
				width: 34vw;
				height: 16vw;
				border-radius: 1vw;
				padding: 50rpx 80rpx;
				box-sizing: border-box;
				background-color: rgba(58, 139, 218, 0.6);

				.verify-types {
					display: flex;
					justify-content: space-around;
					height: calc(100% - 72rpx);
					align-items: center;

					.verify-item {
						padding: 20rpx 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.verify-icon {
							width: 5vw;
							height: 5vw;
							margin: 0 auto 20rpx;
						}

						.verify-icon3 {
							width: 4.5vw;
							height: 4.5vw;
							margin: 0 auto 20rpx;
						}

						.verify-text {
							text-align: center;
							color: var(--color-ff);
							font-size: var(--text-20);
						}
					}
				}
			}

			.right-modules {
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 20rpx;
				height: 16vw;

				.register:hover {
					transition: all 0.3s ease;
					transform: translateY(-5px);
					box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
				}

				.register {
					background-color: rgba(255, 255, 255, 0.8);
					border-radius: 1vw;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 44%;
					cursor: pointer;
					transition: all 0.3s ease;
					transform: translateY(0);
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

					.register-icon {
						width: 3vw;
						height: 3vw;
						// width: 140rpx;
						// height: 140rpx;
						margin-left: 1vw;
					}

					.register-title {
						font-weight: bold;
						font-size: var(--text-38);
						color: var(--color-32);
						margin-right: 2vw;
					}
				}

				.stats {
					background-color: rgba(255, 255, 255, 0.8);
					border-radius: 1vw;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					align-items: center;
					color: #333;
					height: 44%;

					.stats-icon {
						width: 3vw;
						height: 3vw;
						margin-left: 1vw;
					}

					.stats-info {
						display: flex;
						justify-content: space-around;
						width: 60%;
						margin-right: 1vw;

						.stat-item {
							display: flex;
							flex-direction: column;
							align-items: center;

							.stat-num {
								font-size: var(--text-38);
								font-weight: bold;
								color: var(--color-32);
								margin-right: 5rpx;
							}

							.stat-desc {
								color: var(--color-33);
								font-size: var(--text-16);
							}
						}
					}
				}
			}
		}

		// 响应式适配
		@media screen and (min-aspect-ratio: 16/9) {
			.bg-container {
				.dynamic-bg {
					width: 100%;
					height: auto;
				}
			}

			.content-wrapper {
				background-size: 100% auto;
			}
		}

		@media screen and (max-aspect-ratio: 4/3) {
			.bg-container {
				.dynamic-bg {
					width: auto;
					height: 100%;
				}
			}

			.content-wrapper {
				background-size: auto 100%;
			}
		}
	}

	// 用户弹窗
	::v-deep .user-popup .uv-popup__content {
		width: 35% !important;
		height: 30vh !important;
		border-radius: 0.4vw;
		background: transparent;
	}

	.popup-content-user {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #edf3ff;
		box-sizing: border-box;
		position: relative;

		.close-item-user {
			position: absolute;
			right: 0.8vw;
			top: 0.8vw;
			cursor: pointer;
			transition: transform 0.3s ease;
		}

		/* 鼠标悬停时旋转 */
		.close-item-user:hover {
			/* 旋转180度，你可以根据需要调整角度 */
			transform: rotate(180deg);
		}
	}

	// 登录弹窗
	::v-deep .loging-popup .uv-popup__content {
		width: 25% !important;
		// width: 50% !important;
		height: 45vh !important;
		border-radius: 1vw;
		background: transparent;
	}


	.popup-content-log {
		width: 100%;
		height: 100%;
		background-color: #edf3ff;
		position: relative;

		.close-item-log {
			position: absolute;
			right: 0.8vw;
			top: 0.8vw;
			cursor: pointer;
			transition: transform 0.3s ease;
		}

		/* 鼠标悬停时旋转 */
		.close-item-log:hover {
			/* 旋转180度，你可以根据需要调整角度 */
			transform: rotate(180deg);
		}
	}


	/* 审核弹窗 */
	::v-deep .review-popup .uv-popup__content {
		width: 90% !important;
		height: 94vh !important;
		border-radius: 1.4vw;
		background: transparent;
	}




	/* 审核弹窗内容区 */
	.popup-content {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #edf3ff;
		box-sizing: border-box;
		position: relative;

		.close-item {
			position: absolute;
			right: 0.8vw;
			top: 0.8vw;
			cursor: pointer;
			transition: transform 0.3s ease;
		}

		/* 鼠标悬停时旋转 */
		.close-item:hover {
			/* 旋转180度，你可以根据需要调整角度 */
			transform: rotate(180deg);
		}

	}
</style>